<template>
    <div>
        <div class="title">当地好玩景点推荐</div>
        <ul>
            <li
                    class="item border-bottom"
                    v-for="(item,key) of tour"
                    @click="reflesh"
                    v-show="key<num"
            >
                <router-link :to="{name: '/TourDetail', params:{id:item.tour_id}}">
                <div class="item-img-wrapper">
                    <img
                            class="item-img"
                            :src="item.tour_picture"
                    >
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.tour_title}}</p>
                    <p class="item-desc">{{item.tour_content}}</p>
                </div>
                </router-link>
            </li>
        </ul>
        <span class="all" @click="showMore">{{txt}}</span>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "HomeWeekend",
        props: ['touring'],
        data () {
            return {
                tour: [],
                tour_id: '',
                tour_picture: '',
                tour_title: '' ,
                tour_content: '',
                tour_userid:'',
                tour_time: '',
                tour_userimage:'',
                isShow: true,
                txt: '显示全部',
                num: 3
            }
        },
        mounted(){
            axios.get('/api/tour/index.html')
                .then((res) => {
                    console.log(res);
                    this.tour = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        methods: {
            reflesh(){
                location.reload()
            },
            showMore(){

                this.isShow = !this.isShow;

                this.num = this.isShow? 2: this.tour.length;
                this.txt = this.isShow?  '显示全部':'收起'
            }

        }
    }
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .title
        margin-top .2rem
        line-height .8rem
        background #eee
        text-indent .2rem
    .item-img-wrapper
        overflow hidden
        height 0
        padding-bottom 33.9%
        .item-img
            width: 100%;
            max-height: 200px;
    .item-title
        line-height .54rem
        font-size .32rem
        ellipsis()
    .item-desc
        line-height .4rem
        color #ccc
        ellipsis()
</style>
